<template>
  <view class="content">
    <view style="width:100%; height:750rpx;background-color: aqua;">
      <l-echart ref="chartRef"></l-echart>
    </view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'

// 获取容器的dom元素
const chartRef = ref(null)
// echart图表的配置信息
const Options = ref({})

onMounted(()=>{
  addPie()
})

// 加载饼图结构
const addPie = async () => {
  const MyPie = await chartRef.value.init(echarts)
  Options.value = {
    title:{
      text:'支出构成',
      left:"center",
      top:"10rpx"
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top:"5%",
      left: 'left',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ]
      }
    ]
  }
  MyPie.setOption(Options.value)
}

</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
}
</style>
